<script setup lang="ts">
import { ref } from 'vue';
import { queryOldList } from '@/api';
import { getOffsetByPage } from '@/tools/page';
// import Search from './search.vue';
import CardItem from './card.vue';
import Pagination from '@/components/pagination/index.vue';
import FlexWrap from '@/components/flex-wrap/index.vue';
import EmptyOperate from '@/components/empty-operate/index.vue';
import RouterJump from '@/components/router-jump/index.vue';
import PageStatus from '@/components/page-status/index.vue';
import { useCareStore } from '@/store';

const { queryLevels } = useCareStore();

queryLevels();

const list = ref([]);
const loading = ref(true);
const query = (current: number, size: number) => queryOldList(getOffsetByPage({
	current,
	size
})).then((res) => {
	list.value = res.Data.MemberList || [];
}).finally(() => {
	loading.value = false;
});


const onShowSizeChange = (current: number, pageSize: number) => {
	query(current, pageSize)
};

</script>

<template>
	<PageStatus :loading="loading" :empty="!list.length">
		<template #empty>
			<EmptyOperate text="数据">
				<RouterJump to="/personnel/old/add" text="添加入住长者" />
			</EmptyOperate>
		</template>
		<!-- <Search /> -->
		<RouterJump to="/personnel/old/add" type="primary" text="添加入住长者" />
		<FlexWrap>
			<CardItem v-for="(item, index) in list" :item="item" :key="index"></CardItem>
		</FlexWrap>
	</PageStatus>
	<Pagination v-show="list.length" :total="list.length" @showSizeChange="onShowSizeChange" />
</template>
<style scoped></style>
